<template>
  <b-page class="game-data-index" :load="loading">
    <div class="game-data-show-list d-aic">
      <a class="game-data-show-item" v-for="item in gameDataList" :key="item.id" @click="gotoData(item)">
        <div class="game-name">
          <img src="../../../../assets/avatar.png" class="game-icon">
          <div class="game-title">活动编号：{{ item.id }}</div>
        </div>
        <div class="game-modal">
          <div class="game-modal-name">
            {{ getModule(item.module) }} {{ item.name }}
          </div>
          <div class="game-time">
            <span class="mr-10">{{ getModule(item.module) }}</span> <span>{{ item.createTime?getTime(item.createTime):'2019-12-24 11:11' }}</span>
          </div>
        </div>
      </a>
    </div>
    <a-pagination v-model="pagination.current" :total="pagination.total" show-less-items/>
  </b-page>
</template>

<script>

  import API from '@/api/gameData'

  export default {
    name: 'GameDataIndex',
    data () {
      return {
        loading: false,
        pagination: {
          current: 1,
          total: 0,
          size: 10
        },
        gameDataList: []
      }
    },
    computed: {
      qwUserId () {
        return this.$store.state.user.info.qwUserId
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      gotoData (item) {
        this.$router.push({
          path: '/qywx/sjfx/page',
          query: {
            gameTaskId: item.id
          }
        })
      },
      getData () {
        API.searchAll({ qwUserId: this.qwUserId, query: this.pagination }).then(res => {
          this.gameDataList = res.records
          this.pagination.total = res.total
        })
      },
      handleTableChange (pagination) {
        this.pagination.current = pagination.current
        this.pagination.pageSize = pagination.pageSize
        this.getData()
      },
      getTime (time) {
        return this.$Utils.getTimeFormat(time).substring(0, 10)
      },
      getModule (module) {
        let moduleName = ''
        const list = [{ label: 'qw', value: '企业微信活动' }, { label: 'open', value: '企业微信活动' }]
        list.forEach(item => {
          if (item.label === module) {
            moduleName = item.value
          }
        })
        return moduleName || '企业微信活动'
      }

    }
  }
</script>

<style lang="less">
  .game-data-index {
    .game-data-show-list {
      width: 100%;
      flex-wrap: wrap;

      .game-data-show-item {
        background-color: #fff;
        width: 22%;
        box-shadow: 0 1px 23px 0 rgba(86, 86, 86, .1);
        margin-right: 24px;
        margin-bottom: 24px;
        border-radius: 5px;
        min-width: 240px;
        color: #de1f26;
        cursor: pointer;

        .game-icon {
          width: 46px;
          height: 46px;
        }

        .game-title {
          height: 46px;
          line-height: 46px;
          margin-left: 10px;
          font-weight: 700;
          font-size: 18px;
          color: #494949;
        }

        .game-name {
          display: flex;
          flex-direction: row;
          padding: 24px 0 16px;
          margin: 0 24px;
        }

        .game-modal {
          padding: 2px 24px 16px;

          .game-modal-name {
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .game-time {
            margin-top: 5.6px;
            margin-bottom: 11px;
            color: #888;
          }
        }
      }
    }
  }
</style>
